<template>
  <n-form-item :label="formItem.label" :path="path" :first="true" v-show="show">
    <div class="item">
      <ocean v-if="model" :use="formItem.component" v-model:value="value"></ocean>
      <p class="tip" v-if="tip">{{ tip }}</p>
    </div>
  </n-form-item>
</template>
<script lang="ts">
export default {
  name: "ocean-form-item",
};
</script>
<script lang="ts" setup>
import { get as _get, set as _set } from 'lodash'
import { computed } from 'vue';
import Ocean from './Ocean.vue';

const props = defineProps<{
  ocean: any,
  model: any,
  path?: string,
  show?: boolean,
  tip?: string,
}>()

const formItem = computed(() => props.ocean)
const key = computed(() => props.ocean.key);
const path = computed(() => props.path ? props.path + '.' + key.value : key.value);

const value = computed({
  get() {
    return _get(props.model, key.value)
  },
  set(v) {
    _set(props.model, key.value, v)
  }
})
</script>

<style scoped>
.item {
  width: 100%;
}

.tip {
  font-size: 12px;
  color: rgba(130, 130, 130, 0.6);
  padding: 4px;
}
</style>